<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>邀请好友</title>
	<link rel="stylesheet" href="../css/common.css">
	<link rel="stylesheet" type="text/css" href="../css/swiper-3.3.1.min.css">

	<style>
		.swiper-container {
			width: 100%;
			margin: 20px auto;
			margin-bottom: 5rem;
    }	
	.swiper-slide {
	    background-position: center;
	    width: 80%;
	}
	    .swiper-slide img {
	        display: block;
	        width: 100%;
	        height: 100%;
	    }
		.jilu{
			background-color: #007AFF;
			height: 1.5rem;
			line-height: 1.5rem;
			padding: 0 .5rem;
			border-radius: 4px;
		}
		.jilu a{
			color: #fff;
		}
		.invite{
			text-align: center;
		}
		.xianshi{
			color: #888;
			margin: 1rem 0;
		}
		.invite_friend{
			font-size: 1.25rem;
			font-weight: bold;
		}
		.fasong{
			width: 80%;
			margin: 0 auto;
			color: #fff;
			background-color: #0075FF;
			padding: .5rem;
			border-radius: 4px;
		}
		.yaoqingBox{
			display: flex;
			align-items: center;
			padding: 1rem;
			box-sizing: border-box;
		}
		.mine{
			font-size: 1.125rem;
			width: 100%;
			text-align: center;
		}
		.copy,.copys{
			white-space: nowrap;
			width: 4rem;
			text-align: center;
			background-color: #d7d7d7;
			height: 1.5rem;
			line-height: 1.5rem;
			color: #fff;
			border-radius: 2rem;
		}
		.myShare{
			font-size: 1rem;
			font-weight: bold;
			text-align: center;
		}
		#inp{
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
		}
		#inps{
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
		}
		.save{
			position: fixed;
			width: 100%;
			bottom: 0;
			padding: 1rem 0;
			border-top: 1px solid #E4E4E4;
			background-color: #fff;
			z-index: 1;
		}
		.saveBtn{
			height: 2rem;
			line-height: 2rem;
			width: 50%;
			margin: 0 auto;
			text-align: center;
			border-radius: 8px;
			background: linear-gradient(to right, #0075ff , #00c5ff);
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">
				<img src="../assets/left_J.png" >
			</div>
			<div class="tabCenter">分享邀请好友</div>
			<div class="tabRight jilu"><a href="../html/invite_h.html">邀请记录</a></div>
		</div>
	</div>
	<div class="invite">
		<div class="xianshi">限时活动：07.21-08.12</div>
		<div class="invite_friend">邀请好友赚xx元</div>
		<div class="xianshi">好友消费可永久获得额外最高的60%的奖励</div>
		<div class="fasong">点击下方邀请活动图片素材/邀请码/专属链接发送给您的好友</div>
		<div class="yaoqingBox">
			<div class="mine">我的邀请码：<span class="code" id="txt">FHASDH12</span> 
			<input id="inp"></div>
			<div class="copy" onclick="copy()">复制</div>
		</div>
		<div class="yaoqingBox">
			<div class="mine">我的专属链接：<span class="code" id="txts">http://asdhas.com</span> 
			<input id="inps"></div>
			<div class="copy" onclick="copys()">复制</div>
		</div>
	</div>
	<!-- 广告图 -->
	<div class="myShare">我的分享素材</div>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="../assets/bac.png" >
			</div>
			<div class="swiper-slide">
				<img src="../assets/meinv.png" >
			</div>
			<div class="swiper-slide">
				<img src="../assets/bac.png" >
			</div>
		</div>
	</div>
	<div class="save">
		<div class="saveBtn">保存图片到相册</div>
	</div>
</body>
<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/swiper-3.3.1.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/clipboard.min.js"></script>
<script>
	function copy(){
		var txt = document.getElementById("txt").innerText;
		var inp = document.getElementById("inp");
		inp.value = txt;
		inp.select();
		document.execCommand("copy");
		alert("复制成功")
	}
	function copys(){
		var txt = document.getElementById("txts").innerText;
		var inp = document.getElementById("inps");
		inp.value = txt;
		inp.select();
		document.execCommand("copy");
		alert("复制成功")
	}
	setTimeout(function() {
		var size = $(window).innerWidth() / 7.5
		var wid = $(window).innerWidth() * 0.8
		$('.swiper-container').css({
			'height': wid
		})
		stretchNum = .4 * size;
		new Swiper('.swiper-container', {
			effect: 'coverflow',
			// slidesPerView: 3,
			grabCursor: true,
			centeredSlides: true,
			slidesPerView: 'auto',
			coverflow: {
				rotate: 0, // 旋转的角度
				stretch: -stretchNum, // 拉伸   图片间左右的间距和密集度
				depth: 100, // 深度   切换图片间上下的间距和密集度
				modifier: 2, // 修正值 该值越大前面的效果越明显
				slideShadows: false // 页面阴影效果
			}
		})
	}, 100);
</script>
</html>